<template>
  <div class="all">
    <!-- 待发货3-->
    <div v-if="isshow">
      <div class="box">
        <ul>
          <li v-for="(item,index) in arr" :key="index">
            <div class="li-header">
              <img :src="item.shop_url" />
              <!-- 店铺 -->
              <span>{{item.shop_title}}</span>
              <span class="spanright" @click="del(index)">
                <span>删除订单</span>
              </span>
            </div>
            <div class="li-center">
              <div>
                <img :src="item.img_url" />
              </div>
              <!-- 商品信息 -->
              <div>
                <span>{{item.title}}</span>
              </div>
            </div>
            <div class="li-bottom">
              <!-- 单价 -->
              <p>单价￥{{item.new_price}}</p>
              <!-- 数量 -->
              <div class="li-num">数量:{{item.num}}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>
    <div v-else>
      <noorder></noorder>
    </div>
  </div>
</template>
<script>
import noorder from "../Shop-order/no-order/noorder";
export default {
  components: {
    noorder
  },
  data() {
    return {
      //  全选
      isallcheck: false,
      arr: []
    };
  },
  methods: {
    del(index) {
      this.arr.splice(index, 1);
      sessionStorage.setItem("send", JSON.stringify(this.arr));
    }
  },
  computed: {
    //  判断是否有订单
    isshow() {
      //  接收浏览器购物车数据
      let send = JSON.parse(sessionStorage.getItem("send")) || [];
      this.arr = send;

      let newshow = true;
      if (this.arr.length == 0) {
        newshow = false;
      } else {
        newshow = true;
      }
      return newshow;
    }
  }
};
</script>

<style lang="scss" scoped>
.all {
  .order-header {
    background-color: white;
    p {
      font-size: 30px;
      line-height: 80px;
      width: 100%;
      text-align: center;
      i {
        float: left;
        line-height: 80px;
        padding-left: 20px;
        font-size: 40px;
      }
    }
  }
  .box {
    margin: 0 20px;
    & > ul {
      & > li {
        margin: 15px;
        border-radius: 10px;
        background-color: white;
        padding: 20px 20px;
        .li-header {
          & > img {
            width: 15px;
            border-radius: 50%;
          }
          .spanright {
            float: right;
            color: orangered;
          }
        }
        .li-center {
          display: flex;
          margin-top: 20px;
          justify-content: space-between;
          div {
            input {
              margin-top: 60px;
            }
          }
          img {
            width: 150px;
            margin: 0 20px;
          }
        }
        & > p {
          display: flex;
          justify-content: flex-end;
        }
        .li-bottom {
          margin-top: 25px;
          color: gray;
          display: flex;
          justify-content: space-between;
          span {
            border-radius: 30px;
            padding: 5px 20px;
            border: 1px solid gray;
          }
        }
      }
    }
  }
}
</style>